<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/8
  Time: 15:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>ajax----三级联动</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        $(function () {
            $("#department").change(function () {
                var did = $("#department").val();
                $.ajax({
                    url:"ClassesServlet?method=select",
                    type:"post",
                    data:{"did":did},
                    dataType:"json",
                    success:function (data) {
                        $("#classes").empty();
                        $("#classes").append("<option>===请选择班级===</option>");
                        $("#student").empty();
                        $("#student").append("<option>===请选择学生===</option>");
                        $.each(data, function (index, classesList) {
                            $("#classes").append("<option value='"+classesList.cid+"'>" + classesList.cname + "</option>")
                        })
                    }
                })
            })
        })
    </script>
    <script>
        $(function () {
            $("#classes").change(function () {
                var cid = $("#classes").val();
                console.log(cid);
                $.ajax({
                    url:"StudentServlet?method=selectBycid",
                    type:"post",
                    data:{"cid":cid},
                    dataType:"json",
                    success:function (data) {
                        $("#student").empty();
                        $("#student").append("<option>===请选择学生===</option>");
                        $.each(data, function (index, studentList) {
                            $("#student").append("<option>" + studentList.sname + "</option>")
                        })
                    }
                })
            })
        })
    </script>
</head>
<body>
<select id="department">
    <option>===请选择系别===</option>
    <c:forEach items="${departments}" var="departments">
        <option value="${departments.did}">${departments.dname}</option>
    </c:forEach>
</select>
<select id="classes">
    <option>===请选择班级===</option>
</select>
<select id="student">
    <option>===请选择学生===</option>
</select>
</body>
</html>
